<template>
  <div class="epic-sound-code">
    <MonacoEditor ref="monacoEditorRef" autoToggleTheme class="epic-editor" :model-value="initModelValue"
      lineNumbers="off" @update:model-value="setSchemas" />
  </div>
</template>
<script lang="ts" setup>
import { inject, ref, toRaw, watch } from 'vue'
import { pluginManager, deepEqual, deepCompareAndModify } from '@/components/formdesigner/utils'
import { Designer } from '@/components/formdesigner/types/epic-designer'
const MonacoEditor = pluginManager.getComponent('monacoEditor')
const monacoEditorRef = ref<any>(null)
const designer = inject('designer') as Designer
let oldVal: any = {}
watch(() => designer.state.checkedNode, (newVal: any) => {
  if (!deepEqual(oldVal, toRaw(newVal))) {
    monacoEditorRef.value?.setValue(JSON.stringify(newVal, null, 2))
  }
}, {
  deep: true
})

const initModelValue = JSON.stringify(designer.state.checkedNode, null, 2)

function setSchemas(e: string) {
  try {
    if (!designer.state.checkedNode) { return false }
    oldVal = JSON.parse(e)
    deepCompareAndModify(designer.state.checkedNode, oldVal)
  } catch (error) {
    console.warn("[epic-desinger：源码]异常：", error);
  }
}
</script>
